<template>
    <div class="info-collect">
        <Crumb name="Storage"></Crumb>
        <div class="content">
            <!--<el-button-->
                    <!--type="primary"-->
                    <!--@click="openAdd"-->
            <!--&gt;Add New Export-->
            <!--</el-button>-->
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By Ship Number"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-input
                        v-model="bl"
                        size="small"
                        class="input"
                        placeholder="Search By SN"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                        size="small"
                        type="primary"
                >Search
                </el-button>

                <el-button
                        style="float: right"
                        size="small"
                        type="primary"
                        @click="outOrderList = true"
                >Stock out
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="visitList"
                        @select-all="selectAll"
                        @select="select"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="Config">
                                    <span>{{ props.row.config }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="No"
                            width="60"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="declaration"
                            label="Declaration No"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="shipNo"
                            label="Ship No"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="declarationDate"
                            label="Date"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="contractNo"
                            label="Contract No"
                            width="200"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="destination"
                            label="Destination"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="model"
                            label="Model"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="unitType"
                            label="Unit Type"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="sn"
                            label="S/N"
                            width="200"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="en"
                            label="E/N"
                            width="200"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="xxNo"
                            label="xxNo"
                            width="150"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="brand"
                            label="Brand"
                            width="150"
                    >
                    </el-table-column>


                    <el-table-column label="Location" width="180">
                        <template slot-scope="scope">
                            <el-input-number :min=0 v-model="scope.row.number" size="small"></el-input-number>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>

            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Stock out"
                        :visible.sync="outOrderList"
                        width="80%"
                        >

                    <div>
                        <el-button @click="outOrderShow= true" type="primary" style="margin-bottom: 10px" size="small">SURAT JALAN /BPK</el-button>

                        <el-table
                                :data="visitList"
                                @select-all="selectAll"
                                @select="select"
                                border
                                stripe
                                style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-form label-position="left" inline class="demo-table-expand">
                                        <el-form-item label="Config">
                                            <span>{{ props.row.config }}</span>
                                        </el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="declaration"
                                    label="Declaration No"
                                    width="180"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="declarationDate"
                                    label="Date"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="contractNo"
                                    label="Contract No"
                                    width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="destination"
                                    label="Destination"
                                    width="150"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="model"
                                    label="Model"
                                    width="150"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="unitType"
                                    label="Unit Type"
                                    width="150"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="sn"
                                    label="S/N"
                                    width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="en"
                                    label="E/N"
                                    width="200"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="xxNo"
                                    label="xxNo"
                                    width="150"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="brand"
                                    label="Brand"
                                    width="150"
                            >
                            </el-table-column>
                            <el-table-column label="Price" width="180">
                                <template slot-scope="scope">
                                    <el-input  v-model="scope.row.price" size="small"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>


                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                    </span>
                </el-dialog>

                <el-dialog title="SURAT JALAN /BPK" :visible.sync="outOrderShow" width="20%" top="0">
                    <el-form :model="outVo" label-width="150">
                        <el-form-item label="SURAJALAN">
                            <el-input v-model="outVo.outNo" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="BPU">
                            <el-input v-model="outVo.bpu" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="CONTRACT NO">
                            <el-input v-model="outVo.contractNo" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="WO">
                            <el-input v-model="outVo.wo" size="small"></el-input>
                        </el-form-item>
                       <el-form-item label="Delivery Date">
                           <el-date-picker v-model="outVo.deliveryDate" size="small">

                           </el-date-picker>
                       </el-form-item>
                        <el-form-item label="Customer" size="small">
                            <el-select v-model="outVo.customer">
                                <el-option value="PT.KINGSUM.TECH">PT.KINGSUM.TECH</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Contact" size="small">
                            <el-select v-model="outVo.contact">
                                <el-option value="Peter">Peter</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Phone">
                            <el-input v-model="outVo.phone" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="Accessory1">
                            <el-input v-model="outVo.accessory1" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="Accessory2">
                            <el-input v-model="outVo.accessory2" size="small"></el-input>
                        </el-form-item>
                        <el-form-item label="Accessory3">
                            <el-input v-model="outVo.accessory3" size="small"></el-input>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="outOrderShow = false">Cancel</el-button>
                        <el-button type="primary" @click="outOrderShow = false">Confirm</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'

    export default {
        name: "info-collect",
        data() {
            return {
                outVo:{
                    outNo:'',
                    bpu:'',
                    contractNo:'',
                    wo:'',
                    deliveryDate:'',
                    customer:'',
                    location:'',
                    contact:'',
                    phone:'',
                    accessory1:'',
                    accessory2:'',
                    accessory3:'',
                },
                outOrderShow:false,
                outOrderList:false,
                checkAll:false,
                visitList: [{
                    declaration : 'LONKING_12_05',
                    shipNo:'VESSEL TEMP 05',
                    declarationDate:'2018-12-05',
                    contractNo: "LONGKING20181205ECDF",
                    destination: "SURABAYA",
                    sn:'DE3353333512',
                    en:'R96554422324',
                    model:'TC9600RT',
                    unitType:'EGDGDCG',
                    xxNo:'TRDDC122333',
                    brand:'Trendinao',
                    config:'new customer and good for full payment',

                    id: 2
                }
                ],
                ruleForm: {
                    declaration: '',
                    shipNo: '',
                    declarationDate: '',
                    contractNo: '',
                    bl:'',
                    destination:'',
                    remarks:'',
                    packageList:'',
                    cargoList:'',
                    forMeList:'',
                    id:'',
                },
                rules: {
                    declaration: [
                        { required: true, message: 'Declaration is required', trigger: 'blur' },
                    ],
                    shipNo: [
                        { required: true, message: 'Ship No is required', trigger: 'blur' }
                    ],
                    declarationDate: [
                        {  required: true, message: 'Declaration Date is required', trigger: 'change' }
                    ],
                    contractNo: [
                        {  required: true, message: 'Contract No is required', trigger: 'blur' }
                    ],
                    destination: [
                        {  required: true, message: 'Destination No is required', trigger: 'blur' }
                    ],
                },
                key: '',
                bl:'',
                total: 11,
                dialogVisible:false
            }
        },
        methods: {
            selectAll(){

            },
            select(){

            },
            submitForm(){
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if (this.id) {
                            alert('m')
                        } else {
                            alert('a')
                        }
                    } else {
                        return false;
                    }
                });
            },
            clear(){
                this.ruleForm.title = '';
                this.ruleForm.customerName = '';
                this.ruleForm.times = '';
                this.ruleForm.address = '';
                this.ruleForm.detail = '';
            },
            openAdd(){
                this.clear();
                this.dialogVisible = true
            },
            openEdit(r){
                this.ruleForm.title = r.title;
                this.ruleForm.customerName = r.customerName;
                this.ruleForm.times = r.times;
                this.ruleForm.address = r.address;
                this.ruleForm.detail = r.detail;
                this.id = r.id;
                this.dialogVisible = true

            },
            changePage(page) {
                alert(page)
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>